@charset 'UTF-8';

/**
 * css3动画演示
 * @authors lqxion 
 * @date    2016-02-22 17:16:28
 * @version 1.0.0
 */

body,
div,
table,
ul,
li,
tr,
td,
tbody,
p,
a,
img,
span {
    margin: 0;
    padding: 0;
}
body { padding-bottom: 70px; }
.box {
    position: relative;
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    width: 360px;
    height: 240px;
}

.box-block {
    position: relative;
    width: 100%;
    height: 100%;
}

.box-img img {
    position: relative;
    display: block;
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
}

.box-caption {
    overflow: hidden;
    text-align: center;
    color: #fff;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.box-caption .box-header {
    font-size: 1.3em;
    font-weight: 700;
    position: absolute;
    top: 25%;
    left: 10%;
    overflow: hidden;
    width: 80%;
    margin: 0;
    padding: 0;
}

.box-caption .box-body {
    font-size: 1em;
    position: absolute;
    top: 40%;
    left: 10%;
    overflow: hidden;
    width: 80%;
}

.box-block .box-link {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    opacity: 1;
}


/* 关闭式border动画 closed-border || 交叉式border forked-border*/

.forked-border:hover .box-block img,
.closed-border:hover .box-block img {
    cursor: pointer;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    opacity: .7;
}

.forked-border .box-header .closed-border .box-header {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.forked-border:hover .box-header,
.closed-border:hover .box-header {
    color: #09c;
}

.forked-border .box-body,
.closed-border .box-body {
    top: 60%;
    -webkit-transition: top .4s ease-in-out;
    -moz-transition: top .4s ease-in-out;
    -ms-transition: top .4s ease-in-out;
    -o-transition: top .4s ease-in-out;
    transition: top .4s ease-in-out;
    opacity: 0;
}

.forked-border:hover .box-body,
.closed-border:hover .box-body {
    top: 40%;
    opacity: 1;
}

.forked-border .box-caption:before,
.forked-border .box-caption:after,
.closed-border .box-caption:before,
.closed-border .box-caption:after {
    position: absolute;
    content: '';
    -webkit-transition: opacity .4s, -webkit-transform .4s;
    -moz-transition: opacity .4s, -moz-transform .4s;
    -o-transition: opacity .4s, -o-transform .4s;
    transition: opacity .4s, transform .4s;
}

.closed-border .box-caption:before {
    top: 8%;
    right: 10%;
    bottom: 8%;
    left: 10%;
    -webkit-transform: scale(0, 1);
    -moz-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.closed-border .box-caption:after {
    top: 8%;
    right: 10%;
    bottom: 8%;
    left: 10%;
    -webkit-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -o-transform-origin: 100% 0;
    transform-origin: 100% 0;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
}

.forked-border .box-caption:before {
    top: 10%;
    right: 5%;
    bottom: 10%;
    left: 5%;
    -webkit-transform: scale(0, 1);
    -moz-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.forked-border .box-caption:after {
    top: 5%;
    right: 10%;
    bottom: 5%;
    left: 10%;
    -webkit-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -o-transform-origin: 100% 0;
    transform-origin: 100% 0;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
}

.forked-border:hover .box-caption:before,
.forked-border:hover .box-caption:after,
.closed-border:hover .box-caption:before,
.closed-border:hover .box-caption:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}


/* 3D翻转 flipX围绕X轴翻转 flipY围绕Y轴翻转 */

.flipY,
.flipX {
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
    -webkit-perspective-origin: center;
    -moz-perspective-origin: center;
    perspective-origin: center;
}

.flipX .box-block,
.flipY .box-block {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flipY .box-block .box-img,
.flipX .box-block .box-img {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    backface-visibility: hidden;
}

.flipY .box-block > div.box-img img,
.flipX .box-block > div.box-img img {
    position: relative;
    display: block;
    max-width: 100%;
}

.flipX .box-caption,
.flipY .box-caption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    background-color: #fe7253;
    backface-visibility: hidden;
}

.flipY:hover div.box-img {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flipX:hover div.box-img {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.flipX .box-caption {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}

.flipY .box-caption {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.flipX:hover .box-caption {
    -webkit-transform: rotateX(0);
    -moz-transform: rotateX(0);
    transform: rotateX(0);
    opacity: 1;
}

.flipY:hover .box-caption {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
    opacity: 1;
}

/*下滑动画 slide slideAll*/

.slide,.slideAll{
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.slideAll .box-caption,
.slide .box-caption{
	color: #fff;
    background: rgba(254, 114, 83, 0);
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -o-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.slideAll:hover .box-caption,
.slide:hover .box-caption{
	background: rgba(254, 114, 83, .8);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slideAll .box-caption,
.slideAll .box-caption .box-link,
.slide .box-caption,
.slide .box-caption .box-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden;
}
.slideAll .box-header,
.slide .box-header{
    top: -50%;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    opacity: 0;
}
.slideAll:hover .box-header,
.slide:hover .box-header{
	color: #fff;
    top: 25%;
    opacity: 1;
}
.slideAll .box-body,
.slide .box-body{
    top: -60%;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    opacity: 0;
}
.slideAll:hover .box-body,
.slide:hover .box-body{
	color: #fff;
    top: 40%;
    opacity: 1;
}
.slideAll .box-img>img {
    position: relative;
    display: block;
    width: 100%;
    opacity: .9;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden;
}

.slideAll:hover .box-img>img {
    opacity: 1;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
}
